<template>
  <div class="echarts">
    <div id="main" style="width: 600px; height: 300px"></div>
  </div>
</template>

<script>
export default {
  name: "Histogram",
  methods: {
    myEcharts() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      //   配置图表
      var option = {
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: {
              readOnly: false,
            },
            magicType: {
              type: ["line", "bar"],
            },
            restore: {},
            saveAsImage: {},
          },
        },
        title: {
          text: "库存条状图",
        },
        tooltip: {},
        legend: {
          data: ["库存量"],
        },
        xAxis: {
          data: [
            "N95口罩",
            "普通医用口罩",
            "普通温度计",
            "生理盐水",
            "防毒面具",
            "医用酒精",
          ],
          axisLabel: {
            textStyle: {
              fontSize: 15,
              fontWeight: "bold",
            },
            interval: 0, //横轴信息全部显示
          },
        },
        yAxis: {},
        series: [
          {
            name: "库存量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#C1232B",
                    "#B5C334",
                    "#FCCE10",
                    "#E87C25",
                    "#27727B",
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: "{b}\n{c}",
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
  },
};
</script>

<style lang="less" scoped>
</style>